<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {js:jquery}
    {js:validate}
    {js:dialog}
    {js:artTemplate}
    {js:form}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="{webroot:public/css/twitter-bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet">
</head>

<body>
<div class="container">
    <form action='{url:/seller/guide_update}' method='post'>
        <input type="hidden" name="seller_id" value="{$seller_id}">
        <table class="table list-table" id='guide_box'>
            <colgroup>
                <col width="250px" />
                <col width="350px" />
                <col width="220px" />
            </colgroup>
            <thead>
            <tr>
                <th>名称</th>
                <th>链接地址</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody></tbody>

            <!--导航行模板-->
            <script type='text/html' id='guideTrTemplate'>
                <tr>
                    <td>
                        <input type='text' name='guide_name[]' class='form-control' value='<%=name%>' pattern='required' alt='请填写导航名' />
                    </td>
                    <td>
                        <input type='text' name='guide_link[]' class='form-control' value='<%=link%>' pattern='required' alt='请填写URL，如：http://www.aircheng.com' />
                    </td>
                    <td>
                        <a href="javascript:;"><i class='operator glyphicon glyphicon-arrow-up btn btn-default' alt='向上' title='向上'></i></a>
                        <a href="javascript:;"><i class='operator glyphicon glyphicon-arrow-down btn btn-default' alt='向下' title='向下'></i></a>
                        <a href="javascript:;"><i class='operator glyphicon glyphicon-remove btn btn-default' alt='删除' title='删除'></i></a>
                    </td>
                </tr>
            </script>

            <tfoot>
            <tr>
                <td colspan="3">
                    <input type="button" class="btn btn-success" value="新加一个" onclick="add_guide();"/>
                    <input type="submit" class="btn btn-success" value="保存数据"/>
                </td>
            </tr>
            </tfoot>
        </table>
    </form>
</div>
</body>
<script type='text/javascript'>
//DOM加载完毕
$(function()
{
    //生成导航
    {if:$guideList = Api::run('getGuideList',$seller_id)}
    var guideList = {echo:JSON::encode($guideList)};
    for(var index in guideList)
    {
        add_guide(guideList[index]);
    }
    {else:}
    add_guide();
    {/if}
});

//添加导航
function add_guide(data)
{
    var data = data ? data : {};
    var guideTrHtml = template.render('guideTrTemplate',data);
    $('#guide_box tbody').append(guideTrHtml);
    var last_index = $('#guide_box tbody tr').size()-1;
    buttonInit(last_index);
}

//操作按钮绑定
function buttonInit(indexValue,ele)
{
    ele = ele || "#guide_box";
    if(indexValue == undefined || indexValue === '')
    {
        var button_times = $(ele+' tbody tr').length;

        for(var item=0;item < button_times;item++)
        {
            buttonInit(item,ele);
        }
    }
    else
    {
        var obj = $(ele+' tbody tr:eq('+indexValue+') .operator')

        //功能操作按钮
        obj.each(
            function(i)
            {
                switch(i)
                {
                    //向上排序
                    case 0:
                    {
                        $(this).click(
                            function()
                            {
                                var insertIndex = $(this).parent().parent().parent().prev().index();
                                if(insertIndex >= 0)
                                {
                                    $(ele+' tbody tr:eq('+insertIndex+')').before($(this).parent().parent().parent());
                                }
                            }
                        )
                    }
                    break;

                    //向上排序
                    case 1:
                    {
                        $(this).click(
                            function()
                            {
                                var insertIndex = $(this).parent().parent().parent().next().index();
                                $(ele+' tbody tr:eq('+insertIndex+')').after($(this).parent().parent().parent());
                            }
                        )
                    }
                    break;

                    //删除排序
                    case 2:
                    {
                        $(this).click(
                            function()
                            {
                                var obj = $(this);
                                art.dialog.confirm('确定要删除么？',function(){obj.parent().parent().parent().remove()});
                            }
                        )
                    }
                    break;
                }
            }
        )
    }
}
</script>
</html>